<template>
	<view>
		<head-top></head-top>
		<view class="answers-details-container">
			<view class="a-title"><span>Q</span>{{info.title}}</view>
			<view class="a-goods">
				<image :src="info.goods_logo" @click="navigateGoods(info.goods_id)"/>
				<div class="a-goods-desc">
					<h3  @click="navigateGoods(info.goods_id)">{{info.goods_name}}</h3>
					<div>
						<p>￥{{info.goods_price}}</p>
						<button @click="navigateGoods(info.goods_id)">立即购买</button>
					</div>
				</div>
			</view>
			<p class="answers-history">浏览次数：{{info.view}}</p>
			<p class="answers-quesiton">{{info.title}}</p>
			<we-chat-user :name="wxInfo.weixin_name" :imgUrl="wxInfo.weixin_image"></we-chat-user>
			<div class="answers-rote">
				<h3>{{askDataList.length}}条回答</h3>
				<view class="answers-rote-list">
					<view class="li" v-for="(item,index) in askDataList" :key="index">
						<div class="answers-rote-item-top">
							<img :src="item.logo"/>
							<div>
								<h4>{{item.nickname}}</h4>
								<p>{{item.addtime}}</p>
							</div>
						</div>
						<p>{{item.content}}</p>
					</view>
				</view>
				<div class="answers-pages">
                    <p v-if="nextAsk.id" @click="navigateTo('./details?id='+nextAsk.id)">上一篇：{{nextAsk.title}}</p>
                    <p v-if="preAsk.id" @click="navigateTo('./details?id='+preAsk.id)">下一篇：{{preAsk.title}}</p>
				</div>
			</div>
		</view>
		<div class="answers-shop">
			<h3>{{siteInfo.name}}</h3>
			<view class="answers-shop-list">
				<view class="li" @click="navigateTo('/pages/goods/index?id='+siteInfo.id)">商品列表</view>
				<view class="li" @click="navigateTo('/pages/shop/index?id='+siteInfo.id)">进入店铺</view>
			</view>
		</div>
		<!-- 销量与猜你喜欢 -->
		<sales leftTitle="销量排行榜" rightTitle="新品上市" :leftList="info.salesGoodsList" :rightList="info.latestGoodsList"></sales>
		<div class="follow-contanier-box">
			<div class="follow-contanier">
				<h3>最受关注排行榜</h3>
				<view class="follow-list" >
					<view class="li" @click="navigateTo('./details?id='+item.id)" v-for="(item,index) in info.followAskList" :key="index">{{item.title}}</view>
				</view>
			</div>
			<div class="follow-contanier">
				<h3>最新问题</h3>
				<view class="follow-list">
					<view class="li" @click="navigateTo('./details?id='+item.id)" v-for="(item,index) in info.latestAskList" :key="index">{{item.title}}</view>
				</view>
			</div>
		</div>
		<p class="foot-copy">{{siteInfo.description}}</p>
		<foot-bottom></foot-bottom>
		<fab :topBtn="isTopBtn"></fab>
	</view>
</template>

<script>
	import fab from '@/components/fab'; //快捷菜单
	import weChatUser from '@/components/WeChatUser'; //微信客服
	import footBottom from '@/components/footBottom'; //公共底部
    import { askDetails } from '@/api/answers.js';
	export default {
	    data() {
			return{
				isTopBtn:false,
                info:'',
				wxInfo:'',
				askDataList:'',
				nextAsk:'',
				preAsk:'',
				siteInfo:''
			}
		},
		components:{
			fab,
			footBottom,
			weChatUser
		},
        onLoad(e){
            askDetails(e.id).then((res)=>{
                this.info = res.data.datas
				this.wxInfo  = res.data.datas.wxInfo
				this.askDataList =  res.data.datas.askDataList
				this.nextAsk = res.data.datas.nextAsk
				this.preAsk = res.data.datas.preAsk
				this.siteInfo = res.data.datas.siteInfo
            })
        },
		onPageScroll(e){
			if(e.scrollTop>=400){
				this.isTopBtn=true
			}
			if(e.scrollTop<=100){
				this.isTopBtn=false
			}
		},
		methods:{
			trigger(e){
				uni.redirectTo({
				    url: e.item.url
				}); 
			},
            navigateTo(url){
            	uni.navigateTo({
            	    url: url
            	});
            },
			navigateGoods(id){
				this.$Shop.navigateGoods(id);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.answers-details-container{
		background: #fff;
		margin-top:110rpx;
		.a-title{
			width:700rpx;
			margin:0 auto;
			font-size:36rpx;
			display: flex;
			align-items: center;
			padding:20rpx 0;
			span{
				display: inline-block;
				background: #fd8197;
				border-radius: 8rpx;
				color: #fff;
				width:52rpx;
				height:52rpx;
				text-align: center;
				line-height: 52rpx;
				margin-right:10rpx;	
			}
		}
		.a-goods{
			width:660rpx;
			margin:0 auto;
			display: flex;
			justify-content: space-between;
			border:1px solid #eee;
			padding:20rpx;
			image{
				width:280rpx;
				height:280rpx;
			}
			.a-goods-desc{
				width:360rpx;
				h3{
					font-size:28rpx;
					color:#666;
				}
				div{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-top:20rpx;
					p{
						color:#fd8197;
						font-size:24rpx;
					}
					button{
						background: #fd8197;
						color:#fff;
						font-size:28rpx;
						&:after{
							border:none !important;
						}
					}
				}
			}
		}	
		.answers-history{
			width:700rpx;
			margin:20rpx auto;
			text-align: right;
			font-size:24rpx;
			color:#cbcbcb;
		}
		.answers-quesiton{
			width:660rpx;
			margin:0 auto;
			padding:20rpx;
			background: #fff5f3;
			border: 1px solid #fd8197;
			color:#343434;
			font-size:28rpx;
			margin-bottom:30rpx;
		}
		.answers-rote{
			width:700rpx;
			margin:0 auto;
			margin-top:30rpx;
			border-top:1px solid #eee;
			padding-top:20rpx;
			h3{
				color:#333;
				font-size:28rpx;
			}
			.answers-rote-list{
				margin-top:20rpx;
				.li{
					border-bottom:1px solid #eee;
					padding:20rpx 0;
					.answers-rote-item-top{
						display: flex; 
						justify-content: flex-start;
						align-items: center;
						margin-bottom:10rpx;
						img{
							width:100rpx;
							height:100rpx;
							border-radius:50%;
							margin-right:10rpx;
						}
						div{
							h4{
								font-size:28rpx;
								color:#333;
							}
							p{
								color:#999;
								font-size:24rpx;
							}
						}
					}
					&>p{
						color:#343434;
						font-size:28rpx;
					}
				}
			}
			.answers-pages{
				padding-bottom:30rpx;
				p{
					color:#fd8197;
					font-size:24rpx;
					margin-top:30rpx;
				}
			}
		}
	}
	.answers-shop{
		background: #fff;
		border-top:1px solid #eee;
		border-bottom:1px solid #eee;
		padding:40rpx 0; 
		h3{
			color:#f30;
			font-size:32rpx;
			margin-left:25rpx;
		}
		.answers-shop-list{
			margin-top:20rpx;
			width:600rpx;
			margin:0 auto;
			display: flex;
			justify-content: space-between;
			text-align: center;
			.li{
				border:1px solid #eee;
				padding:20rpx 80rpx;
				color:#666;
				font-size:28rpx;
				border-radius: 20rpx;
				margin-top:40rpx;
			}
		}
	}
	.follow-contanier-box{
		background: #fff;
		border-top:1px solid #eee;
		margin-bottom:30rpx;
		.follow-contanier{
			width:720rpx;
			margin:0 auto;
			padding-top:20rpx;
			padding-bottom:30rpx;
			h3{
				color:#343434;
				font-size:28rpx;
				margin-bottom:10rpx;
				font-weight:bold;
			}
			.follow-list{
				.li{
					font-size:28rpx;
					color:#666;
					border-bottom:1px solid #eee;
					padding:16rpx 0;
					
				}
			}
		}
	}
	.foot-copy{
		width:700rpx;
		margin:0 auto;
		color:#333;
		font-size:24rpx;
		line-height: 40rpx;
		text-align: left;
		margin-bottom:30rpx;
		margin-top:40rpx;
	}
</style>
